import React, { useState } from 'react';
import { Card, Tabs, Typography } from 'antd';
import { GlobalOutlined, MailOutlined, SafetyCertificateOutlined, CloudServerOutlined } from '@ant-design/icons';
import WebsiteConfig from './WebsiteConfig';
import JudgeServerPage from './JudgeServer';
import styles from './index.module.css';

const { Title } = Typography;

const SystemSettings: React.FC = () => {
  const [activeTab, setActiveTab] = useState('website');

  // 标签页项
  const items = [
    {
      key: 'website',
      label: (
        <span>
          <GlobalOutlined />
          网站配置
        </span>
      ),
      children: <WebsiteConfig />,
    },
    {
      key: 'judge_server',
      label: (
        <span>
          <CloudServerOutlined />
          评测服务器
        </span>
      ),
      children: <JudgeServerPage />,
    },
    // 以下标签页可以根据需要扩展
    /*
    {
      key: 'mail',
      label: (
        <span>
          <MailOutlined />
          邮件设置
        </span>
      ),
      children: <div>邮件设置页面（待开发）</div>,
    },
    {
      key: 'security',
      label: (
        <span>
          <SafetyCertificateOutlined />
          安全设置
        </span>
      ),
      children: <div>安全设置页面（待开发）</div>,
    },
    */
  ];

  return (
    <div className={styles.settingsContainer}>
      <Title level={2}>系统配置</Title>
      <div className={styles.tabsWrapper}>
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          items={items}
          tabPosition="top"
          className={styles.settingsTabs}
        />
      </div>
    </div>
  );
};

export default SystemSettings; 